<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        section{
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 100px auto;
            display: grid;
            grid-template: 
                "a1 a2 a3"1fr
                "a4 a5 a6"1fr
                "a7 a8 a9"1fr
                /1fr 1fr 1fr
        }
        div{
            border: 1px solid #000;
            /* grid-column-start: 3;
            grid-column-end: 4;
            grid-row-start: 3;
            grid-row-end: 4; */
            /* grid-row: 3/4;
            grid-column: 3/4 */
            /* grid-area:3/3/4/4 */
            justify-self: end;
            align-self: end;
        }
    </style>
</head>
<body>
    <section>
        <div>刚子</div>
    </section>
</body>
</html>
<!-- 
    Q:如果在网格布局中有一个三行三列的网格，那么在水平和垂直上有几条线？

    可以加在子级元素上的属性
        定义项目在行和列上的起始与结束位置的属性
        - grid-column-start 规定在列的方向的左边框
        - grid-column-end 对顶在列的方向的右边框
        - grid-row-start 规定在行的方向的上边框
        - grid-row-end 规定在行的方向的下边框
        属性值:起始和结束的边框线

        简写：
            - grid-row:开始/结束
            - grid-column：start/end
        
        再简写：
            - grid-area:水平开始/垂直开始/水平结束/垂直结束


        控制子项的对齐方式
            - justify-self  水平
            - align-self     垂直
        属性值:
            - start
            - end
            - center
            - stretch 

        
        总结:网格布局的作用
            - 优点:可以解决一些不常见的网格布局
            - 缺点
                - 属性太多，和弹性盒相似，不容易记住，容易混淆
                - 网格布局兼容性太差，只有pc端才能使用
                - 网格布局和弹性盒进行比较
                    - 推荐使用弹性盒
                    - 网格布局只在下的网页小的板块中使用
 -->